<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG to PNG Converter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            margin-bottom: 30px;
        }
        .upload-area {
            border: 3px dashed #ddd;
            border-radius: 8px;
            padding: 40px;
            text-align: center;
            margin-bottom: 30px;
            cursor: pointer;
            transition: border-color 0.3s;
        }
        .upload-area:hover {
            border-color: #0033FF;
        }
        .upload-area.dragging {
            border-color: #0033FF;
            background-color: #f0f8ff;
        }
        .upload-area p {
            margin: 10px 0;
            color: #666;
        }
        .upload-button {
            padding: 10px 20px;
            background-color: #0033FF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .upload-button:hover {
            background-color: #0028CC;
        }
        #fileInput {
            display: none;
        }
        .preview-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }
        .preview-box {
            border: 2px solid #eee;
            padding: 20px;
            text-align: center;
            min-height: 200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #fafafa;
            border-radius: 8px;
        }
        .preview-box h3 {
            margin-top: 0;
            color: #666;
        }
        .controls {
            display: flex;
            gap: 20px;
            align-items: center;
            flex-wrap: wrap;
            margin-bottom: 20px;
        }
        label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: bold;
        }
        input[type="number"] {
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100px;
        }
        button {
            padding: 10px 20px;
            background-color: #0033FF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0028CC;
        }
        button:disabled {
            background-color: #999;
            cursor: not-allowed;
        }
        #svgPreview {
            max-width: 100%;
            max-height: 300px;
        }
        #pngPreview {
            max-width: 100%;
            max-height: 300px;
            border: 1px solid #eee;
        }
        .info {
            background-color: #f0f8ff;
            padding: 15px;
            border-radius: 5px;
            margin-top: 20px;
        }
        .transparent-toggle {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .hidden {
            display: none;
        }
        .filename {
            font-size: 14px;
            color: #666;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>SVG to PNG Converter</h1>
        
        <div class="upload-area" id="uploadArea">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="17 8 12 3 7 8"></polyline>
                <line x1="12" y1="3" x2="12" y2="15"></line>
            </svg>
            <p><strong>Drag & Drop your SVG file here</strong></p>
            <p>or</p>
            <button class="upload-button" onclick="document.getElementById('fileInput').click()">Choose File</button>
            <input type="file" id="fileInput" accept=".svg,image/svg+xml">
            <p class="filename" id="filename"></p>
        </div>
        
        <div class="preview-section hidden" id="previewSection">
            <div class="preview-box">
                <h3>Original SVG</h3>
                <div id="svgPreview"></div>
            </div>
            <div class="preview-box">
                <h3>Converted PNG</h3>
                <canvas id="pngPreview"></canvas>
            </div>
        </div>
        
        <div class="controls hidden" id="controlsSection">
            <label>
                Width:
                <input type="number" id="widthInput" value="800" min="1" max="4000">
            </label>
            <label>
                Height:
                <input type="number" id="heightInput" value="600" min="1" max="4000">
            </label>
            <label class="transparent-toggle">
                <input type="checkbox" id="transparentBg" checked>
                Transparent Background
            </label>
            <button id="convertBtn">Convert to PNG</button>
            <button id="downloadBtn" disabled>Download PNG</button>
        </div>
        
        <div class="info">
            <p><strong>How to use:</strong></p>
            <ul>
                <li>Drag and drop an SVG file or click to upload</li>
                <li>Adjust the width and height as needed</li>
                <li>Choose whether you want a transparent background</li>
                <li>Click "Convert to PNG" to generate the PNG image</li>
                <li>Click "Download PNG" to save the converted image</li>
            </ul>
            <p><strong>Technical Details:</strong></p>
            <ul>
                <li>Conversion happens entirely in your browser using Canvas API</li>
                <li>SVG (Scalable Vector Graphics) is converted to PNG (Portable Network Graphics)</li>
                <li>The process: SVG → Image → Canvas → PNG data URL</li>
                <li>Original aspect ratio can be maintained or changed as needed</li>
            </ul>
        </div>
    </div>

    <script>
        let currentSvgContent = '';
        let currentFilename = '';
        
        const uploadArea = document.getElementById('uploadArea');
        const fileInput = document.getElementById('fileInput');
        const svgPreview = document.getElementById('svgPreview');
        const canvas = document.getElementById('pngPreview');
        const ctx = canvas.getContext('2d');
        const widthInput = document.getElementById('widthInput');
        const heightInput = document.getElementById('heightInput');
        const convertBtn = document.getElementById('convertBtn');
        const downloadBtn = document.getElementById('downloadBtn');
        const transparentBg = document.getElementById('transparentBg');
        const previewSection = document.getElementById('previewSection');
        const controlsSection = document.getElementById('controlsSection');
        const filenameDisplay = document.getElementById('filename');
        
        // Drag and drop events
        uploadArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadArea.classList.add('dragging');
        });
        
        uploadArea.addEventListener('dragleave', () => {
            uploadArea.classList.remove('dragging');
        });
        
        uploadArea.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadArea.classList.remove('dragging');
            
            const files = e.dataTransfer.files;
            if (files.length > 0 && files[0].type === 'image/svg+xml') {
                handleFile(files[0]);
            }
        });
        
        fileInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                handleFile(e.target.files[0]);
            }
        });
        
        function handleFile(file) {
            if (file.type !== 'image/svg+xml') {
                alert('Please upload an SVG file');
                return;
            }
            
            currentFilename = file.name.replace('.svg', '');
            filenameDisplay.textContent = file.name;
            
            const reader = new FileReader();
            reader.onload = (e) => {
                currentSvgContent = e.target.result;
                displaySvg();
                previewSection.classList.remove('hidden');
                controlsSection.classList.remove('hidden');
                
                // Extract original dimensions
                const parser = new DOMParser();
                const svgDoc = parser.parseFromString(currentSvgContent, 'image/svg+xml');
                const svgElement = svgDoc.querySelector('svg');
                
                if (svgElement) {
                    const viewBox = svgElement.getAttribute('viewBox');
                    const width = svgElement.getAttribute('width');
                    const height = svgElement.getAttribute('height');
                    
                    if (viewBox) {
                        const [, , vbWidth, vbHeight] = viewBox.split(' ').map(Number);
                        widthInput.value = Math.min(vbWidth * 2, 1600);
                        heightInput.value = Math.min(vbHeight * 2, 1600);
                    } else if (width && height) {
                        widthInput.value = parseInt(width) * 2;
                        heightInput.value = parseInt(height) * 2;
                    }
                }
                
                convertSvgToPng();
            };
            reader.readAsText(file);
        }
        
        function displaySvg() {
            svgPreview.innerHTML = currentSvgContent;
            // Ensure SVG fits in preview
            const svg = svgPreview.querySelector('svg');
            if (svg) {
                svg.style.maxWidth = '100%';
                svg.style.maxHeight = '100%';
                svg.style.height = 'auto';
            }
        }
        
        convertBtn.addEventListener('click', convertSvgToPng);
        downloadBtn.addEventListener('click', downloadPng);
        transparentBg.addEventListener('change', () => {
            if (currentSvgContent) {
                convertSvgToPng();
            }
        });
        
        function convertSvgToPng() {
            const width = parseInt(widthInput.value);
            const height = parseInt(heightInput.value);
            
            canvas.width = width;
            canvas.height = height;
            
            const img = new Image();
            const svgBlob = new Blob([currentSvgContent], { type: 'image/svg+xml' });
            const url = URL.createObjectURL(svgBlob);
            
            img.onload = function() {
                ctx.clearRect(0, 0, width, height);
                
                // Apply background if not transparent
                if (!transparentBg.checked) {
                    ctx.fillStyle = 'white';
                    ctx.fillRect(0, 0, width, height);
                }
                
                ctx.drawImage(img, 0, 0, width, height);
                URL.revokeObjectURL(url);
                downloadBtn.disabled = false;
            };
            
            img.onerror = function() {
                alert('Error converting SVG. Please check your file.');
                URL.revokeObjectURL(url);
            };
            
            img.src = url;
        }
        
        function downloadPng() {
            const link = document.createElement('a');
            link.download = currentFilename + '.png';
            
            // Canvas toDataURL() creates a PNG by default
            link.href = canvas.toDataURL('image/png');
            link.click();
        }
    </script>
</body>
</html>